<template>
  <div>
    <!-- 图标 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple bgc1" style="height: 166px">
          <div>
            <h4>日销售统计</h4>
            <div style="display: flex" class="subInfo">
              <div>
                0 <br />
                <div class="data">当日销售量（个）</div>
              </div>
              <div>
                0 <br />
                <div class="data">当日销售额（元）</div>
              </div>
              <div>
                0 <br />
                <div class="data">当日分成（元）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple bgc2" style="height: 166px">
          <div>
            <h4>月销售统计</h4>
            <div style="display: flex" class="subInfo2">
              <div>
                1286
                <div class="data">当月销售量（个）</div>
              </div>
              <div>
                1.08
                <div class="data">当月销售额（万元）</div>
              </div>
              <div>
                70.59
                <div class="data">当月分成（元）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 主体 -->
    <el-row :gutter="20">
      <el-col :span="24" class="main-body">
        <div class="grid-content bg-purple" style="background: white">
          <div style="display: flex, line-height: 40px">
            合作商:
            <el-input placeholder="请输入" style="width: 200px" />
            日期:
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px"
              >查询</el-button
            >
          </div>
          <!-- 统计 -->
          <div class="body-title">
            <div>笔数统计: <span>1286</span>个</div>
            <div>收入统计: <span>10785.75</span>个</div>
            <div>分成统计: <span>70.59</span>个</div>
          </div>
          <!-- form -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="订单日期" width="180">
            </el-table-column>
            <el-table-column prop="ownerName" label="合作商" width="180">
            </el-table-column>
            <el-table-column prop="ratio" label="分成比例"> </el-table-column>
            <el-table-column prop="orderTotalMoney" label="收入(元)"> </el-table-column>
            <el-table-column prop="orderCount" label="笔数"> </el-table-column>
            <el-table-column prop="totalBill" label="分成金额(元)">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { SunList } from '@/api/zhang/report'
export default {
  data () {
    return {
      tableData: [],
      reg: {
        start: '2022-10-01',
        end: '2022-11-30',
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  async created () {
    const { currentPageRecords } = await SunList(this.reg)
    currentPageRecords.forEach(item => {
      item.ratio = item.ratio + '%'
    })
    this.tableData = currentPageRecords
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bgc1 {
  padding-top: 15px;
  background: #e9f3ff;
  border-radius: 20px;
  background-image: url("~@/assets/bgc1.png"), url("~@/assets/bgc3.png");
  background-repeat: no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
}
.bgc2 {
  padding-top: 15px;
  border-radius: 20px;
  background: #fbefe8 url("~@/assets/bgc2.png") no-repeat calc(100% - 12px) 100%;
}
h4 {
  margin-left: 20px;
  margin-top: 0;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
}
.subInfo {
  justify-content: space-around;
  align-items: center;
  color: #072074;
  font-size: 36px;
  font-weight: 600;
  .data {
    font-size: 12px;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
  }
}
.subInfo2 {
  justify-content: space-around;
  align-items: center;
  color: #ff5757;
  font-size: 36px;
  font-weight: 600;
  .data {
    font-size: 12px;
    font-weight: 400;
    color: #de9690;
    line-height: 17px;
  }
}
.main-body {
  width: 99%;
  height: 250px;
  background-color: #fff;
  padding: 15px;
  margin: 0 10px 0 10px;
}
.body-title {
  margin-top: 10px;
  display: flex;
  div {
    margin-right: 5%;
    font-size: 14px;
    span {
      color: red;
      font-size: 20px;
      font-weight: 700;
    }
  }
}
</style>
